<template>
    <el-table ref="orderTable" :data="tableData" style="width: 100%;" v-loading="listLoading" border>
        <el-table-column v-for="(item, index) in column" :label="item.name" :key="index" :width="item.width"
            :align="item.align">
            <template slot-scope="scope">{{ ['year'].includes(item.key) ? scope.row[item.key] : (scope.row[item.key] || 0) + '%' }}
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
import { fundMonthlyPerformance } from '../../../api/fund';
import FundClauseDescription from '@/components/FundClauseDescription.vue';
const column = [
    {
        name: '年度',
        key: 'year',
    }, {
        name: 'Jan',
        key: '1',
    }, {
        name: 'Feb',
        key: '2',
    }, {
        name: 'Mar',
        key: '3',
    }, {
        name: 'Apr',
        key: '4',
    }, {
        name: 'May',
        key: '5',
    }, {
        name: 'Jun',
        key: '6',
    }, {
        name: 'Jul',
        key: '7',
    }, {
        name: 'Aug',
        key: '8',
    }, {
        name: 'Sept',
        key: '9',
    }, {
        name: 'Oct',
        key: '10',
    }, {
        name: 'Nov',
        key: '11',
    }, {
        name: 'Dec',
        key: '12',
    }, {
        name: 'YTD',
        key: 'assembly',
    }, {
        name: 'HSI',
        key: 'metricNameOne',
    }, {
        name: '沪深300',
        key: 'metricNameTwo',
    }, {
        name: 'MSIC中国',
        key: 'metricNameThree',
    },
]
export default {
    name: '',
    components: {
        FundClauseDescription
    },
    props: {
    },
    data() {
        return {
            tableData: [],
            column,
        }
    },
    mounted() {
        const fundId = this.$route.query.id
        fundMonthlyPerformance({
            fundId,
        }).then(res => {
            this.data = res.data;
            const fundNavRawDataMonthly = this.data.fundNavRawDataMonthly;
            const fundRawData = this.data.fundRawData;
            const formatData = []
            fundRawData.forEach((item, index) => {
                const date = new Date(item.timeValue)
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const curYearDataInFormatData = formatData.find(d => d.year === year)
                if (curYearDataInFormatData) {
                    curYearDataInFormatData[month] = ((item.assembly || 0) * 100).toFixed(2);
                } else {
                    formatData.push({
                        year,
                        [month]: ((item.assembly || 0) * 100).toFixed(2)
                    })
                }
            })
            this.tableData = formatData.map((data, index) => {
                const yearDataFromFundNavRawDataMonthly = fundNavRawDataMonthly.find(d => d.timeValue === data.year) || {}
                return {
                    ...data,
                    ...{
                        assembly: ((yearDataFromFundNavRawDataMonthly.assembly || 0) * 100).toFixed(2),
                        metricNameOne: ((yearDataFromFundNavRawDataMonthly.metricNameOne || 0) * 100).toFixed(2),
                        metricNameTwo: ((yearDataFromFundNavRawDataMonthly.metricNameTwo || 0) * 100).toFixed(2),
                        metricNameThree: ((yearDataFromFundNavRawDataMonthly.metricNameThree || 0) * 100).toFixed(2),
                    }
                }
            })
            console.log('tableData', this.tableData)
        })
    },
    methods: {

    }
};
</script>
<style lang='' scoped>
</style>